<template>
  <section class="page-demo">
    <Header showLeft showRight fixed @handle-left="goBack"></Header>
    <div class="page-content header-fixed">
      <h1 style="text-align:center;">demo页面</h1>
      <p>1*1</p>
      <p>1*2</p>
      <p>1*3</p>
      <p>1*4</p>
      <p>1*5</p>
      <p>1*6</p>
      <p>1*7</p>
      <p>1*8</p>
      <p>1*9</p>
      <p>1*10</p>
      <div>当前时间是{{ time }}</div>
      <MainButton/>
    </div>
  </section>
</template>

<script>
import { formatDate } from '@/utils/cloud-utils'
import MainButton from '@/component_basics/MainButton'
import Header from '@/component_basics/Header'
import transferDom from '@/directives/transferDom'

export default {
  name: 'page-demo',
  components: { // 组件
    MainButton,
    Header,
  },
  directives: {
    // 指令
    transferDom
  },
  filters: {
    // 过滤器
    formatDate
  },
  data () {
    return {
      title: '测试',
      time: new Date()
    }
  },
  methods: {
    formatDate,
    getNewDate () {
      setInterval(() => {
        this.time = formatDate(new Date())
      }, 1000)
    },
    goBack () {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
    }
  },
  mounted () {
    this.getNewDate()
  }
}
</script>

<style lang="less" rel="stylesheet/less">
.page-demo {
  text-align: left;

  .common-btns {
    position: fixed;
    bottom: 0;
  }
}
</style>
